import { defineAsyncComponent } from 'vue'
import { ElLoading } from 'element-plus'

interface Options {
  size?: 'default' | 'small' | 'large'
  delay?: number
  timeout?: number
  loading?: boolean
  retry?: boolean
}

export function loadComponent(component: () => Promise<any>, options: Options = {}) {
  const {
    size = 'default',
    delay = 200,
    timeout = 30000,
    loading = true,
    retry = true
  } = options

  return defineAsyncComponent({
    loader: component,
    loadingComponent: loading ? ElLoading.service({
      fullscreen: true,
      text: '加载中...',
      background: 'rgba(255, 255, 255, 0.8)'
    }) : undefined,
    delay,
    timeout,
    onError(error, retry, fail, attempts) {
      if (retry && attempts <= 3) {
        retry()
      } else {
        fail()
      }
    }
  })
} 